<!-- 绑定邮箱页面 -->
<template>
	<view>
		<input :disabled="this.user.email" class="uni-input py-2 px-3" type="text" placeholder="绑定的邮箱" v-model="email" />
		<!-- <input class="uni-input py-2 px-3" type="text" placeholder="请输入密码" v-model="password" /> -->
		<view class="py-2 px-3">
			<!-- 设置按钮是否禁用 -->
			<button
				class="bg-main text-white"
				style="border-radius: 50rpx; border: 0"
				type="primary"
				:disabled="disabled ||this.user.email "
				:class="disabled ? 'bg-main-disabled' : ''"
				@click="submit"
			>
				设置
			</button>
		</view>
	</view>
</template>

<script>
	// 引入 vuex  数据管理工具
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				email: '',
			};
		},
		// 计算属性
		computed: {
			// 结构赋值
			...mapState({
				// 获取到vuex里 state中的user 用户信息
				user:state=> state.user
			}),
			// 监听输入框，有一个为空 按钮就是灰色
			disabled() {
				return this.email == ''
			},
		},
		// 监听 页面加载时
		onLoad(){
			if(this.user.email){ // 如果 vuex中存在 邮箱 
			    // 赋值，让它展示出来
				this.email= this.user.email
			}
		},
		// 存放所有事件
		methods: {
			check() {
				let rule = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
				// 正则 校验不通过
				if (!rule.test(this.email)) {
					uni.showToast({
						title: '邮箱格式不正确',
						icon: 'none',
						duration: 1000,
					});
					return false;
				}
				return true;
			},
			// 设置 按钮
			submit() {
				if (!this.check()) {
					return;
				}
				// 请求 修改邮箱 接口
				this.$H.post('/user/bindemail',{
					email:this.email
				},{token:true}).then(res=>{
					// 调用 vuex中 修改信息方法
					this.$store.commit('editUserInfo', {
						key: 'email', // state.user中的 phone字段
						value: this.email,
					});
					uni.showToast({
						title: '绑定邮箱成功',
						icon: 'none',
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
						});
					}, 800);
				})
			},
		},
	};
</script>

<style lang="scss"></style>
